<template>
  <div class="order-page">
    <el-card class="order-card">
      <template #header>
        <div class="card-header">
          <h2>订单信息</h2>
        </div>
      </template>
      
      <!-- 房源信息 -->
      <div class="section">
        <h3>房源信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">房源标题：</span>
            <span>{{ orderData.house?.title }}</span>
          </div>
          <div class="info-item">
            <span class="label">房源地址：</span>
            <span>{{ orderData.house?.address }}</span>
          </div>
          <div class="info-item">
            <span class="label">租金：</span>
            <span class="price">¥{{ orderData.total_amount }} /月</span>
          </div>
          <div class="info-item">
            <span class="label">押金：</span>
            <span class="deposit">¥{{ orderData.deposit }}</span>
          </div>
        </div>
      </div>

      <!-- 房东信息 -->
      <div class="section">
        <h3>房东信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span>{{ orderData.landlord?.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span>{{ orderData.landlord?.phone }}</span>
          </div>
        </div>
      </div>

      <!-- 合同信息 -->
      <div class="section">
        <h3>合同信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">合同编号：</span>
            <span>{{ orderData.contract_number }}</span>
          </div>
          <div class="info-item">
            <span class="label">生效时间：</span>
            <span>{{ orderData.effective_time }}</span>
          </div>
          <div class="info-item">
            <span class="label">到期时间：</span>
            <span>{{ orderData.expire_time }}</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <el-button type="primary" @click="viewContract">查看合同</el-button>
        <el-button type="success" @click="proceedToPayment">确认支付</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import axios from 'axios';

const route = useRoute();
const router = useRouter();
const orderData = ref({});

// 获取订单数据
const fetchOrderData = async () => {
  try {
    const orderId = route.query.orderId;
    const response = await axios.get(`http://127.0.0.1:8000/order/detail/${orderId}`, {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    });

    if (response.data.code === 200) {
      orderData.value = response.data.data;
    }
  } catch (error) {
    console.error('获取订单数据失败:', error);
    ElMessage.error('获取订单数据失败');
  }
};

// 查看合同
const viewContract = async () => {
  try {
    const userId = localStorage.getItem('userid');
    const response = await axios.get(`http://127.0.0.1:8000/users/contract/get/?user=${userId}`, {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    });

    if (response.data.code === 200) {
      router.push({
        path: '/contract',
        query: {
          contractData: JSON.stringify(response.data.data)
        }
      });
    }
  } catch (error) {
    console.error('获取合同失败:', error);
    ElMessage.error('获取合同失败');
  }
};

// 进入支付页面
const proceedToPayment = () => {
  ElMessage.info('支付功能即将上线');
};

onMounted(() => {
  fetchOrderData();
});
</script>

<style scoped>
.order-page {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.order-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section {
  margin-bottom: 30px;
}

.section h3 {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.label {
  color: #666;
  min-width: 100px;
}

.price, .deposit {
  color: #ff6b6b;
  font-weight: bold;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
</style> 